<template>
  <!-- main开始      start -->
    <div class="main">
        <div class="bigmain w">
            <div class="main_top">
                <p>
                    <i class="iconfont icon-duigou"></i>
                    <strong>订单提交成功，请您及时付款，以便尽快为您发货~~</strong>
                </p>
                <div>
                    <p>请您在提交订单<span>4小时</span>之内完成支付，超时订单会自动取消。订单号：{{orde.orderId}}</p>
                   <i>应付金额：<span>￥{{orde.totalFee}}</span></i>
                </div>
            </div>
            <div class="main_center">
                <h4>重要说明:</h4>
                <ol>
                    <li>尚品汇商城支付平台目前支持<span>支付宝</span>支付方式。</li>
                    <li>其它支付渠道正在调试中，敬请期待。</li>
                    <li>为了保证您的购物支付流程顺利完成，请保存以下支付宝信息。</li>
                </ol>
                <h4 class="h_center">支付宝账户信息：（很重要，请保存！！！）</h4>
                <ul>
                    <li>支付帐号：11111111</li>
                    <li>密码：111111</li>
                    <li>支付密码：111111</li>
                </ul>
            </div>
            <div class="main_bootom">
                <div class="step-tit">
                    <h5>支付平台</h5>
                </div>
                <div class="step-cont">
                    <ul >
                        <li>
                            <img src="./imges/pay2.jpg" alt="">
                        </li>
                        <li>
                            <img src="./imges/pay3.jpg" alt="">
                        </li>
                    </ul>
                </div>
                <div class="hr"></div>
                <div class="step-tit">
                    <h5>支付网银</h5>
                </div>
                <div class="step-cont">
                    <ul>
                        <li>
                            <img src="./imges/pay10.jpg" alt="">
                        </li>
                        <li>
                            <img src="./imges/pay11.jpg" alt="">
                        </li>
                        <li>
                            <img src="./imges/pay12.jpg" alt="">
                        </li>
                        <li>
                            <img src="./imges/pay13.jpg" alt="">
                        </li>
                        <li>
                            <img src="./imges/pay14.jpg" alt="">
                        </li>
                        <li>
                            <img src="./imges/pay15.jpg" alt="">
                        </li>
                        <li>
                            <img src="./imges/pay16.jpg" alt="">
                        </li>
                        <li>
                            <img src="./imges/pay17.jpg" alt="">
                        </li>
                        <li>
                            <img src="./imges/pay18.jpg" alt="">
                        </li>
                        <li>
                            <img src="./imges/pay19.jpg" alt="">
                        </li>
                        <li>
                            <img src="./imges/pay20.jpg" alt="">
                        </li>
                        <li>
                            <img src="./imges/pay21.jpg" alt="">
                        </li>
                        <li>
                            <img src="./imges/pay22.jpg" alt="">
                        </li>
                    </ul>
                </div>
                <div class="hr"></div>
                <div class="submit">
                    <a href.prevent="" @click="open">立即支付</a>
                </div>
                <div class="step-tit last">
                    <h5>其他支付方式</h5>
                </div>
                <div class="div_last step-cont">
                    <a href="">微信支付</a>
                    <span>中国银联</span>
                </div>
            </div>
        </div>
    </div>
    <!-- main结束      end -->
</template>

<script>
// 引入把收款码地址URL  转化为二维码 插件
import QRCode from 'qrcode'

export default {
    name:'pay',
    data() {
        return {
            orde:{},
            codeUrl:'',
            time:'',
            num:20,
            code:''
        }
    },
    mounted() {
        this.Native()
    },
    methods: {
        // 发送请求
       async Native(){
          let native =  await this.$API.createNative(this.$bus.orde)
          if (native.data.code==200) {  
              this.orde = native.data.data

            //   把url地址转化为二维码图片
              this.codeUrl = await QRCode.toDataURL(native.data.data.codeUrl)
          
          }else{
              console.log('失败');
          }
        },
        // 支付
        open() {
            
            this.$alert(`<img src="${this.codeUrl}"/>`, '请你微信支付', {
                dangerouslyUseHTMLString: true,
                center:true,
                cancelButtonText:"支付遇见问题",
                showCancelButton:true,
                confirmButtonText:`已支付成功`,
                distinguishCancelAndClose:true,
                beforeClose:(type, instance,done) => {
                    //支付出现问题
                    if(type == 'cancel'){
                        alert("请联系管理员")
                        clearInterval(this.time)
                        this.time= null
                        done();//关闭msgbox
                    }else if(type == 'confirm'){
                        this.$route.meta.fleg=true
                        // if (this.code==200) {
                            clearInterval(this.time)
                             this.time = null
                              done();
                              this.$router.push('/paySuccess')
                        // }
                    }else if(type=='close'){
                         clearInterval(this.time)
                        this.time= null
                        done();//关闭msgbox
                    }
                }
            }).catch(()=>{});
            
            //发送请求获取支付是否成功
             if(!this.time){
                try {
                    this.time =   setInterval(async()=>{
                        let status =  await this.$API.queryPayStatus(this.orde.orderId)
                        this.code = status.data.code;
                        if (status.data.code == 200) {
                            this.$route.meta.fleg=true
                                clearInterval(this.time)
                                this.time = null
                                this.$msgbox.close()
                                this.$router.push('/paySuccess')
                            }
                        },1000)
                } catch (error) {
                    console.log(error);
                }
             }
        }
    },
}
</script>

<style scoped lang='less'>
.main{
    .bigmain{
        .main_top{
            p{
                display: flex;
                i{
                    color: green;
                    font-size: 30px;
                }
                strong{
                    align-self: center;
                    margin-left: 10px;
                    font-weight: 600;
                    color: #000;
                    font-size: 14px;
                }
            }
            div{
                display: flex;
                justify-content: space-between;
                margin-left: 35px;
                p{
                    span{
                        color: #e1251b;
                    }
                }
                i{
                    font-size: 15px;
                    font-weight: 400;
                    span{
                        font-size: 18px;
                        color: #e1251b;
                    }
                }
            }
        }
        .main_center{
            margin-top: 5px;
            border: 2px solid #e1251b;
            padding: 12px ;
            padding-left: 20px;
            box-sizing: border-box;
            h4{
                font-size: 14px;
                color: #e1251b;
                line-height: 21px;
            }
            ol{
                margin-left: 25px;
                margin-top: 8px;
                li{
                    list-style:decimal;
                    line-height: 24px;
                    font-size: 14px;
                    span{
                        color: red;
                        font-weight: 600;
                    }
                }
            }
            ul{
                margin-top: 8px;
                li{
                    list-style: disc;
                    line-height: 24px;
                    font-size: 14px;
                    margin-left: 25px;
                }
            }
            .h_center{
                margin-top: 7px;
            }
        }
        .main_bootom{
            margin-top: 10px;
            padding: 25px;
            border: 1px solid #ddd;
            .step-tit{
                margin-top: 20px;
                h5{
                    color: #333;
                }
            }
            .step-cont{
                margin-top: 25px;
                margin-bottom: 15px;
                ul{
                    display: flex;
                    flex-wrap: wrap;
                    margin-left: 30px;
                    .cont_img{
                        border: 1px solid red;
                    }
                    li{
                        border: 1px solid #ddd;
                        padding: 5px 20px;
                        margin-right: 5px;
                        margin-top: 5px;
                    }
                }
            }
            .hr{
                height: 1px;
                background-color: #ddd;
            }
            .submit{
                text-align: center;
                a{
                    cursor: pointer;
                    display: inline-block;
                    padding: 15px 45px;
                    margin: 15px 0px 10px;
                    background-color: rgb(225, 37, 27);
                    color: rgb(255, 255, 255);
                    text-align: center;
                    font-size: 15px;
                    font-weight: 600;
                }
            }
            .last{
                margin-top: 5px;
            }
            .div_last{
                margin-left: 30px;
                margin-top: 20px;
                a:hover{
                    text-decoration:underline;
                    color: red;
                }
            }
        }
    }
}
</style>